<template>
    <div class="container">
     <el-card class="box-card">
        <div v-for="o in 4" :key="o" class="text item">{{'列表内容 ' + o }}</div>
     </el-card>
    <el-card class="box-card">
         <div v-for="o in 4" :key="o" class="text item">{{'列表内容 ' + o }}</div>
     </el-card>
        <el-card class="box-card">
         <div v-for="o in 4" :key="o" class="text item">{{'列表内容 ' + o }}</div>
     </el-card>
        <el-card class="box-card">
         <div v-for="o in 4" :key="o" class="text item">{{'列表内容 ' + o }}</div>
     </el-card>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import CKEditor from "@/components/CKEditor.vue";
export default defineComponent({ 
    components: { CKEditor  },
    setup() {
        const val = ref<string>('<h1>This is Editor</h1>');
        return {
            val
        }
    }
})
// http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
</script>
<style lang="scss" scoped>
.box-card {
    display: inline-block;
    margin: 10px;
}
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 400px);
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  grid-gap: 20px 20px;
}
.gard-center{ 
  justify-items: center;
  align-items: center;
  place-items:center center;
}
</style>